<template>
  <div class="">
    <div>
      <div style="box-shadow: 0px 0px 15px 0 rgba(0, 0, 0, 100.4); background-color: aliceblue;">
        <TopMenu :userName="userName" @mainMenuWidth="handleMainMenuWidth"></TopMenu> <!--- 传给了TopMenu组件userName属性 -->
        <div style="display: flex; ">
          <div style="float: left; ">
            <MainMenu :mainMenuWidth="mainMenuWidth"></MainMenu>
          </div>
          <div style=" float: right;">
            <RouterView></RouterView>
          </div>
        </div>

      </div>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>

import MainMenu from '@/components/MainMenu.vue';
import Footer from '@/components/FooterComponent.vue'
import TopMenu from '@/components/TopMenu.vue';

export default {
  name: "MainPage",

  components: {
    MainMenu,
    Footer,
    TopMenu,
  },
  data() {
    return {
      userName: "",
      mainMenuWidth: "",
      fullScreen: false,
    };
  },
  mounted: function () {
    console.log("----query传值-----", this.$route.query.name)
    console.log("----params传值-----", this.$route.params)
    this.userName = this.$route.query.name;
    this.$router.push({
      path: '/main/testExamFenYe',
    });


  },
  watch: {
    fullScreen(val) {
      console.log("----fullScreen-----", val)
    }
  },
  methods: {
    handleMainMenuWidth(message) {
      this.mainMenuWidth = message;
      console.log("----mainMenuWidth-----", this.mainMenuWidth)
    }

  },
};
</script>
<style scoped></style>
